<template>
  <div class="page-city">
    <van-nav-bar title="当前城市 - " @click-left="$router.back()">
      <template v-slot:left>
        <div class="van-nav-bar__text">
          <van-icon name="cross" />
        </div>
      </template>
    </van-nav-bar>

    <van-search placeholder="请输入搜索关键词" show-action />

    <div class="page-city__body">
      <div class="page-city__view" ref="cityView">

        <div class="page-city__box">
          <h2 class="head">热门城市</h2>
          <ul class="list">
            <li
              class="list-item"
              v-for="city in hotCityList"
              :key="city.cityId"
              @click="onCityClick(city)"
            >
              {{ city.name }}
            </li>
          </ul>
        </div>

        <div class="page-city__box" :ref="`box-${item.py}`" v-for="item in cityList" :key="item.py">
          <h2 class="head">{{ item.py }}</h2>
          <ul class="list">
            <li
              class="list-item"
              v-for="city in item.list"
              :key="city.cityId"
              @click="onCityClick(city)"
            >
              {{ city.name }}
            </li>
          </ul>
        </div>

      </div>
      <div class="page-city__py">
        <ul>
          <li v-for="py in pys" :key="py" @click="goTop(py)">
            {{ py }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from 'axios'

export default {
  name: 'City',

  data () {
    return {
      // 城市原始数据
      cities: []
    }
  },

  computed: {
    cityList () {
      let result = []
      this.cities.forEach(item => {
        // 取出当前城市的拼音首字母
        const py = item.pinyin.charAt(0).toUpperCase()
        // 判断当前py的城市是否已经分类过
        const index = result.findIndex(item => item.py === py)
        if (index > -1) {
          // 存在
          result[index].list.push(item)
        } else {
          // 不存在
          const obj = {
            py,
            list: [item]
          }
          result.push(obj)
        }
      })
      return result.sort((a, b) => {
        return a.py.charCodeAt() - b.py.charCodeAt()
      })
    },

    /**
     * 热门城市
     */
    hotCityList () {
      let result = []
      result = this.cities.filter(item => item.isHot)
      return result
    },

    pys () {
      return this.cityList.map(item => item.py)
    }
  },

  methods: {
    /**
     * 获取城市原始数据
     */
    getCities () {
      Axios.get('https://m.maizuo.com/gateway?k=2260867', {
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1575095471541165882348","bc":"440300"}',
          'X-Host': 'mall.film-ticket.city.list'
        }
      }).then(response => {
        const { data } = response
        this.cities = data.data.cities
      })
    },

    /**
     * 拼音检索
     */
    goTop (py) {
      // 获取对应的元素
      const box = this.$refs[`box-${py}`][0]
      // 计算距离顶部的距离
      const top = box.offsetTop
      // 设置滚动元素的scrollTop
      this.$refs['cityView'].scrollTop = top
    },

    /**
     * 切换城市
     */
    onCityClick (city) {
      // 修改仓库中的city数据
      this.$store.commit('SET_CITY', city)
      // 返回上一页
      this.$router.back()
    }
  },

  created () {
    this.getCities()
  }
}
</script>

<style lang="scss">
@import '~@/assets/styles/mixins.scss';

.page-city {
  display: flex;
  flex-direction: column;
  height: 100%;
  .van-nav-bar__text i {
    font-size: 20px;
  }
  &__body {
    display: flex;
    flex: 1;
    overflow: hidden;
  }
  &__view {
    position: relative;
    flex: 1;
    overflow-y: auto;
  }
  &__py {
    display: flex;
    align-items: center;
    width: 20px;
    background: #fff;
    li {
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
    }
  }
  &__box {
    background: #fff;
    .head {
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      background: green;
    }
    .list {
      margin-left: 15px;
    }
    .list-item {
      @include border-bottom;
      line-height: 36px;
      padding-left: 20px;
    }
  }
}
</style>
